<template>
  <n-tabs justify-content="space-around" type="line" @update:value="test">
    <n-tab-pane name="ajax" tab="远端数据">
      <n-form :model="apiForm" label-width="80" label-placement="left">
        <n-form-item path="api" label="远端api">
          <n-input
            type="text"
            v-model:value="apiForm.api"
            @update:value="
              $emit('update:value', Object.assign({}, apiForm, { api: $event }))
            "
          />
        </n-form-item>
        <n-form-item path="id" label="ID">
          <n-input
            type="text"
            default-value="id"
            v-model:value="apiForm.id"
            @update:value="
              $emit('update:value', Object.assign({}, apiForm, { id: $event }))
            "
          />
        </n-form-item>
        <n-form-item path="label" label="标签">
          <n-input
            type="text"
            default-value="label"
            v-model:value="apiForm.label"
            @update:value="
              $emit(
                'update:value',
                Object.assign({}, apiForm, { label: $event })
              )
            "
          />
        </n-form-item>
        <n-form-item path="value" label="值">
          <n-input
            type="text"
            default-value="value"
            v-model:value="apiForm.value"
            @update:value="
              $emit(
                'update:value',
                Object.assign({}, apiForm, { value: $event })
              )
            "
          />
        </n-form-item>
        <n-form-item v-if="type == 'tree'" path="children" label="子集">
          <n-input
            type="text"
            default-value="children"
            v-model:value="apiForm.children"
            @update:value="
              $emit(
                'update:value',
                Object.assign({}, apiForm, { children: $event })
              )
            "
          />
        </n-form-item>
      </n-form>
    </n-tab-pane>
    <n-tab-pane name="static" tab="静态数据">
      <!-- 树形静态数据 -->
      <tree-edit v-if="type == 'tree'" v-model:data="treeData" @update:value="$emit('update:value',$event)"/>
      <!-- 列表类静态数据 -->
      <n-dynamic-input
        v-else
        :on-create="createStatic"
        v-model:value="staticForm"
        #="{value}"
        @update:value="$emit('update:value', $event)"
        item-style="display:block"
      >
        <n-divider v-if="value.index > 1" />
        <n-form :modal="value" label-width="60" label-placement="left">
          <n-form-item path="id" label="ID">
            <n-input type="text" v-model:value="value.id" />
          </n-form-item>
          <n-form-item path="label" label="标签">
            <n-input type="text" v-model:value="value.label" />
          </n-form-item>
          <n-form-item path="value" label="值">
            <n-input type="text" v-model:value="value.value" />
          </n-form-item>
        </n-form>
      </n-dynamic-input>
    </n-tab-pane>
  </n-tabs>
</template>
<script>
import { ref, h } from "vue";
import { uuid } from "vue-uuid";
import { NButton } from "naive-ui";
import TreeEdit from './TreeEdit.vue';
export default {
  components: { TreeEdit },
  props: ["value", "type"],
  setup(props, { emit }) {
    //远端API数据
    const apiForm = ref({
      api: "",
      id: "id",
      label: "label",
      value: "value",
      children: "children",
    });
    //静态列表数据
    let i = 0;
    const staticForm = ref([{ id: 0, label: "", value: "", index: 0 }]);
    const createStatic = () => {
      i++;
      return { id: i, label: "", value: "", index: i };
    };

    //树形数据
    const treeData = ref([
      {
        id: 0,
        label: "根",
        value: "0",
        index: 0,
        pid: undefined,
        suffix: () =>
        h(
          NButton,
          { text: true, type: 'primary',onclick:()=>{console.log('ok1')} },
          { default: () => {
            console.log('ok')
            return 'test'
          } }
        )
      },
    ]);
    const test = (value) => {
      if (value == "ajax") {
        emit("update:value", apiForm);
      } else {
        emit("update:value", staticForm);
      }
    };

    return {
      apiForm,
      staticForm,
      treeData,
      uuid,
      createStatic,
      test,
    };
  },
};
</script>
